<template>
  <div>
    <p id="p01">str:{{str}}</p>
    <input type="button" value="修改str" @click="changeStr" />
</div>
</template>  
<script>
export default {
  name: "Banner",
  data(){
    return {
      str:"hello"
    }
  },
  methods:{
    changeStr(){
      this.str+="1";
      // 如果想使用str更新后的的新的dom,需要使用 $nextTick();因为，vue更新dom时，用的是异步更新（队列）
      this.$nextTick(()=>{
        console.log(document.getElementById("p01").innerHTML);//str:hello1
      })      
    }
  }
};
</script>
  
<style scoped>
.my-swipe{
  width: 100%;
  height: 12.5rem;
  background-color: skyblue;
}

img{
  width: 100%;
  height: 100%;
}
</style>